<template>
  <div
    ref="tableContainer"
    style="width: 1200px; height: 800px"
  ></div>
  <!-- style="width: calc(100vw - 200px); height: 100vh" -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as VTable from "@visactor/vtable";
import data from "../json/frozen.json"

defineOptions({
  name: "MyVTableFrozen",
});

const tableContainer = ref(null);

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

const option = ref({
  container:tableContainer.value,
  records: data,
  columns,
  widthMode: "standard",
  allowFrozenColCount: 3,
  frozenColCount: 1,
  frozenRowCount: 2,
  showFrozenIcon: true,
});

onMounted(() => {
  console.log(888, tableContainer.value);
  option.value.container = tableContainer.value;
  const tableInstance = new VTable.ListTable(option.value);
});
</script>

